<template>
  <div class="flex_">
    <div class="content_left">
      <el-tree :data="departmentData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="content_right">
      <!-- 搜索框 -->
      <div class="button_box flex1 border1">
        <div class="btns flex2">
          <!-- 搜索框 -->
          <div class="input_box">
            <el-input class="el_input_btn" v-model="keyword" placeholder="请输入文件或文件夹名称过滤"></el-input>
          </div>
          <!-- 搜索 -->
          <div class="btns_box1 marginleft10">
            <el-button class="el_button_btn margintop6" @click="getFolderList" type="primary" size="small" icon="el-icon-search">搜索</el-button>
          </div>
          <!-- 重置 -->
          <div class="btns_box1 marginleft10">
            <el-button class="el_button_btn margintop6" @click="reset" size="small" icon="el-icon-refresh">重置</el-button>
          </div>
        </div>
      </div>
      <!-- 文件及文件夹列表 -->
      <div class="table_box" v-loading="loading">
        <!-- 面包屑 -->
        <div class="breadcrumb">
          <div class="breadcrumb_left">
            <el-breadcrumb class="wgs-braad" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item><span class="all-file" @click="getAll">全部</span></el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,index) in breadcrumbData" :key="index">
                <span class="all-file" @click="getBread(item)">{{item.F_Name}}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="breadcrumb_right">
            <!-- 移动 -->
            <div class="btns_box1" v-if="hasButtonPermission('move')" v-show="allchecked">
              <el-button class="el_button_btn" @click="barchMoveRes" size="small" icon="el-icon-remove">移动</el-button>
            </div>
            <!-- 删除 v-show="allchecked"-->
            <div class="btns_box2" v-show="allchecked" v-if="hasButtonPermission('delete')">
              <el-button class="el_button_btn" @click="batchDelete" type="danger" size="small" icon="el-icon-delete">删除</el-button>
            </div>
            <!-- 新建文件夹 -->
            <div class="btns_box1" v-if="hasButtonPermission('add')">
              <el-button class="el_button_btn width104x28" @click="openNewFolder" type="primary" size="small">新建文件夹</el-button>
            </div>
            <!-- 上传文件 -->
            <div class="btns_box2" v-if="hasButtonPermission('upload')">
              <el-button class="el_button_btn width77x28" @click="openUploadFile" type="primary" size="small">上传文件</el-button>
            </div>
          </div>
        </div>
        <!-- 文件及文件夹列表 --><!-- 表格头 --><!-- 表格体 -->
        <div class="table_content">
          <div class="table_header">
            <div class="check_box"><el-checkbox class="all_checked_box" @change="selectAll" v-model="allchecked"></el-checkbox></div>
            <div class="file_name">名称</div>
            <div class="created_user">创建者</div>
            <div class="created_time">创建时间</div>
            <div class="file_size">大小（M）</div>
            <div class="file_more textaligncenter">操作</div>
          </div>
          <div class="table_body" v-if="allFileData.length > 0">
            <!-- 文件夹列表 -->
            <div class="table_body_items" v-for="(item,index) in allFileData" :key="index">
              <!-- 勾选框 -->
              <div class="check_box">
                <el-checkbox class="all_checked_box" @change="checkItem()" v-model="item.isChecked"></el-checkbox>
              </div>
              <!-- 文件夹名称 -->
              <div class="file_name flexsss" @click="getNodeList(item)">
                <!-- 文件夹 -->
                <div v-if="item.F_Type == '文件夹'">
                  <!-- 有密码的文件夹 -->
                  <div class="file_name_pic" v-if="item.F_IsPassword == 1">
                    <img src="../../../../src/assets/folder/folder.png" >
                    <img class="lock" src="../../../../src/assets/folder/lock.png" >
                  </div>
                  <!-- 没有密码的文件夹 -->
                  <div class="file_name_pic" v-else>
                      <img src="../../../../src/assets/folder/folder.png" >
                  </div>
                </div>
                <!-- 非文件夹 -->
                <div v-else>
                  <!-- 有密码的文件 -->
                  <div class="file_name_pic" v-if="item.F_IsPassword == 1 && item.F_IsSecruity == 0">
                      <!-- excel -->
                      <img v-if="item.F_Type == 'xls' || item.F_Type == 'xlsx'" src="../../../../src/assets/folder/excel.png" >
                      <!-- word -->
                      <img v-else-if="item.F_Type == 'docx' || item.F_Type == 'doc'" src="../../../../src/assets/folder/word.png" >
                      <!-- ppt -->
                      <img v-else-if="item.F_Type == 'pptx' || item.F_Type == 'ppt'" src="../../../../src/assets/folder/ppt.png" >
                      <!-- pdf -->
                      <img v-else-if="item.F_Type == 'pdf'" src="../../../../src/assets/folder/pdf.png" >
                      <!-- 图片 -->
                      <img v-else-if="item.F_Type == 'jpg' || item.F_Type == 'png' || item.F_Type == 'jpeg'" :src="item.F_FilePath" >
                      <!-- txt文本 -->
                      <img v-else-if="item.F_Type == 'txt'" src="../../../../src/assets/folder/txt.png" >
                      <!-- 视频 -->
                      <img v-else-if="item.F_Type == 'mp4'" src="../../../../src/assets/folder/mp4.png" >
                      <!-- 其他 -->
                      <img v-else src="../../../../src/assets/folder/excel.png" >
                      <!-- 锁子 -->
                      <img class="lock" src="../../../../src/assets/folder/lock.png" >
                  </div>
                  <div class="file_name_pic" v-else-if="item.F_IsSecruity == 1">
                      <img  src="../../../../src/assets/flowlist/encryption.png" >
                  </div>
                  <!-- 没有密码的文件 -->
                  <div class="file_name_pic" v-else>
                      <!-- excel -->
                      <img v-if="item.F_Type == 'xls' || item.F_Type == 'xlsx'" src="../../../../src/assets/folder/excel.png" >
                      <!-- word -->
                      <img v-else-if="item.F_Type == 'docx' || item.F_Type == 'doc'" src="../../../../src/assets/folder/word.png" >
                      <!-- ppt -->
                      <img v-else-if="item.F_Type == 'pptx' || item.F_Type == 'ppt'" src="../../../../src/assets/folder/ppt.png" >
                      <!-- pdf -->
                      <img v-else-if="item.F_Type == 'pdf'" src="../../../../src/assets/folder/pdf.png" >
                      <!-- 图片 -->
                      <img v-else-if="item.F_Type == 'jpg' || item.F_Type == 'png' || item.F_Type == 'jpeg'" :src="item.F_FilePath" >
                      <!-- txt文本 -->
                      <img v-else-if="item.F_Type == 'txt'" src="../../../../src/assets/flowlist/txt.png" >
                      <!-- 视频 -->
                      <img v-else-if="item.F_Type == 'mp4'" src="../../../../src/assets/folder/mp4.png" >
                      <!-- 其他 -->
                      <img v-else src="../../../../src/assets/folder/excel.png" >
                  </div>
                </div>
                <div class="file_name_text" :title="item.F_Name">{{item.F_Name}}</div>
              </div>
              <!-- 创建人 -->
              <div class="created_user">{{item.F_CreateUserName}}</div>
              <!-- 创建时间 -->
              <div class="created_time">{{item.F_CreateDate}}</div>
              <!-- 文件夹大小 -->
              <div class="file_size">{{item.F_Size ? (item.F_Size/1024/1024).toFixed(2):'--'}}</div>
              <!-- 点击更多 -->
              <!-- 没有密码的文件夹的操作 重命名\移动\设置密码\删除 -->
              <div class="file_more textaligncenter " v-if="item.F_Type=='文件夹' && item.F_IsPassword == 0">
                <el-col :span="24">
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" >
                      ...
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item" v-if="hasButtonPermission('rename')" icon="el-icon-edit-outline">重命名</el-dropdown-item>
                      <el-dropdown-item :command="item" v-if="hasButtonPermission('move')" icon="el-icon-rank">移动</el-dropdown-item>
                      <el-dropdown-item :command="item" v-if="hasButtonPermission('setPass')" icon="el-icon-lock">设置密码</el-dropdown-item>
                      <el-dropdown-item :command="item" v-if="hasButtonPermission('delete')" icon="el-icon-delete">删除</el-dropdown-item>
                      
                      <el-dropdown-item :command="item" icon="el-icon-warning-outline" 
                          v-if="!hasButtonPermission('rename') && 
                            !hasButtonPermission('move') && 
                            !hasButtonPermission('setPass') &&
                            !hasButtonPermission('delete') ">
                            无操作权限
                        </el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                
                <!-- <el-link class="w-el-link" @click.prevent="reNameFolder(item)" type="primary">重命名</el-link>
                <el-link class="w-el-link" @click.prevent="moveFile(item)" type="primary">移动</el-link>
                <el-link class="w-el-link" @click.prevent="setPasssword(item)" type="primary">设置密码</el-link>
                <el-link class="w-el-link margin-right" @click.prevent="deleteFolder(item)" type="danger">删除</el-link> -->
              </div>
              <!-- 点击更多 -->
              <!-- 有密码的文件夹操作 重命名\移动\修改密码\取消密码\删除 -->
              <div class="file_more textaligncenter" v-else-if="item.F_Type=='文件夹' && item.F_IsPassword == 1">
                <el-col :span="24">
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                      ...
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item" icon="el-icon-edit-outline" v-if="hasButtonPermission('rename')">重命名</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-rank" v-if="hasButtonPermission('move')">移动</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-key" v-if="hasButtonPermission('changePass')">修改密码</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-unlock" v-if="hasButtonPermission('cancel')">取消密码</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-delete" v-if="hasButtonPermission('delete')">删除</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-warning-outline" 
                          v-if="!hasButtonPermission('rename') && 
                            !hasButtonPermission('move') && 
                            !hasButtonPermission('changePass') &&
                            !hasButtonPermission('cancel') &&
                            !hasButtonPermission('delete')">
                            无操作权限
                      </el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                
                <!-- <el-link class="w-el-link" @click.prevent="reNameFolder(item)" type="primary">重命名</el-link>
                <el-link class="w-el-link" @click.prevent="moveFile(item)" type="primary">移动</el-link>
                <el-link class="w-el-link" @click.prevent="changePasssword(item)" type="primary">修改密码</el-link>
                <el-link class="w-el-link" @click.prevent="canclePasssword(item)" type="primary">取消密码</el-link>
                <el-link class="w-el-link margin-right" @click.prevent="deleteFolder(item)" type="danger">删除</el-link> -->
              </div>
              <!-- 点击更多 -->
              <!-- 没有密码文件的操作 移动\下载\重命名\设置密码\删除 -->
              <div class="file_more textaligncenter" v-else-if="item.F_Type != '文件夹' && item.F_IsPassword == 0">
              <el-col :span="24">
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                      ...
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="item" icon="el-icon-rank" v-if="hasButtonPermission('move')">移动</el-dropdown-item>
                        <el-dropdown-item :command="item" icon=" el-icon-download" v-if="hasButtonPermission('download')">下载</el-dropdown-item>
                        <el-dropdown-item :command="item" icon="el-icon-edit-outline" v-if="hasButtonPermission('rename')">重命名</el-dropdown-item>
                        <el-dropdown-item :command="item" icon="el-icon-lock" v-if="hasButtonPermission('setPass')">设置密码</el-dropdown-item>
                        <el-dropdown-item :command="item" icon="el-icon-delete" v-if="hasButtonPermission('delete')">删除</el-dropdown-item>
                        <el-dropdown-item :command="item" icon="el-icon-warning-outline" 
                          v-if="!hasButtonPermission('move') && 
                            !hasButtonPermission('download') && 
                            !hasButtonPermission('rename') &&
                            !hasButtonPermission('setPass') &&
                            !hasButtonPermission('delete')">
                            无操作权限
                        </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                
                <!-- <el-link class="w-el-link" @click.prevent="moveFile(item)" type="primary">移动</el-link>
                <el-link class="w-el-link" @click.prevent="downloadFolder(item)" type="primary">下载</el-link>
                <el-link class="w-el-link" @click.prevent="reNameFolder(item)" type="primary">重命名</el-link>
                <el-link class="w-el-link" @click.prevent="setPasssword(item)" type="primary">设置密码</el-link>
                <el-link class="w-el-link margin-right" @click.prevent="deleteFolder(item)" type="danger">删除</el-link> -->
              </div>
              <!-- 点击更多 -->
              <!-- 有密码文件的操作 移动\下载\重命名\设置密码\删除 -->
              <div class="file_more textaligncenter" v-else-if="item.F_Type != '文件夹' && item.F_IsPassword == 1">
                <el-col :span="24">
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                      ...
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item" icon="el-icon-rank" v-if="hasButtonPermission('move')">移动</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-download" v-if="hasButtonPermission('download')">下载</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-edit-outline" v-if="hasButtonPermission('rename')">重命名</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-key" v-if="hasButtonPermission('changePass')">修改密码</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-unlock" v-if="hasButtonPermission('cancel')">取消密码</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-delete" v-if="hasButtonPermission('delete')">删除</el-dropdown-item>
                      <el-dropdown-item :command="item" icon="el-icon-warning-outline" 
                          v-if="!hasButtonPermission('move') && 
                            !hasButtonPermission('download') && 
                            !hasButtonPermission('rename') &&
                            !hasButtonPermission('changePass') &&
                            !hasButtonPermission('cancel') &&
                            !hasButtonPermission('delete')" >
                            无操作权限
                        </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
                
                <!-- <el-link class="w-el-link" @click.prevent="moveFile(item)" type="primary">移动</el-link>
                <el-link class="w-el-link" @click.prevent="downloadFolder(item)" type="primary">下载</el-link>
                <el-link class="w-el-link" @click.prevent="reNameFolder(item)" type="primary">重命名</el-link>
                <el-link class="w-el-link" @click.prevent="changePasssword(item)" type="primary">修改密码</el-link>
                <el-link class="w-el-link" @click.prevent="canclePasssword(item)" type="primary">取消密码</el-link>
                <el-link class="w-el-link margin-right" @click.prevent="deleteFolder(item)" type="danger">删除</el-link> -->
              </div>
            </div>
          </div>
          <div class="table_body" v-else>
            <img src="../../../assets/flowlist/no-data.png">
          </div>
        </div>
      </div>
      <!-- 新增文件夹弹出框 -->
      <el-dialog
        title="新建文件夹"
        :visible.sync="addFolderVisible"
        width="566px"
        :before-close="handleClose">
        <div class="wrap">
          <div class="wrap_left"><span class="color-red">*</span>文件夹名称：</div>
          <div class="wrap_right"><el-input class="wrap_right_input" v-model="fileName" placeholder="请输入文件夹名称"></el-input></div>
        </div>
        <div class="wrap1">
          <div class="wrap_left"><span class="color-red">*</span>是否需要设置密码：</div>
          <div class="wrap_right">
            <el-radio v-model="isNeedSetPas" label="1">需要</el-radio>
            <el-radio v-model="isNeedSetPas" label="0">不需要</el-radio>
          </div>
        </div>
        <div class="wrap1" v-show="isNeedSetPas == '1'">
          <div class="wrap_left">输入密码：</div>
          <div class="wrap_right"><el-input class="wrap_right_input" type="password" v-model="folderPassword" placeholder="请输入密码"></el-input></div>
        </div>
        <div class="wrap1" v-show="isNeedSetPas == '1'">
          <div class="wrap_left">确认密码：</div>
          <div class="wrap_right"><el-input class="wrap_right_input" type="password" v-model="folderRePassword" placeholder="请确认密码"></el-input></div>
        </div>
        <span slot="footer" class="dialog-footer sure">
          <el-button type="primary" class="addFoldersures" @click="addFolfer">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 上传文件弹出框 -->
      <el-dialog
        title="上传文件"
        :visible.sync="uploadFileVisible"
        width="566px"
        :before-close="handleClose">
        <div class="wrap">
          <div class="wrap_left">文件是否加密：</div>
          <div class="wrap_right">
            <el-radio v-model="fileIsNeedEncryption" label="1">需要</el-radio>
            <el-radio v-model="fileIsNeedEncryption" label="0">不需要</el-radio>
          </div>
        </div>
        <div class="wrap1">
          <div class="wrap_left">是否需要设置密码：</div>
          <div class="wrap_right">
            <el-radio v-model="fileIsNeedSetPas" label="1">需要</el-radio>
            <el-radio v-model="fileIsNeedSetPas" label="0">不需要</el-radio>
          </div>
        </div>
        <div class="wrap1" v-show="fileIsNeedSetPas == '1'">
          <div class="wrap_left">输入密码：</div>
          <div class="wrap_right"><el-input class="wrap_right_input" type="password" v-model="filePassword" placeholder="请输入密码"></el-input></div>
        </div>
        <div class="wrap1" v-show="fileIsNeedSetPas == '1'">
          <div class="wrap_left">确认密码：</div>
          <div class="wrap_right"><el-input class="wrap_right_input" @blur="reFirmPassword" type="password" v-model="fileRePassword" placeholder="请确认密码"></el-input></div>
        </div>
        <div class="wraps">
          <div class="wrap_left1">选择文件：</div>
          <div class="wrap_right1">
          <el-upload
              action=""
              ref="fileupload"
              class="upload-demo"
              :on-change="fileChange"
              multiple
              :http-request="uploadFile1">
            <el-button size="small" type="primary">点击上传</el-button> 
          </el-upload>
          </div>
        </div>
        <span slot="footer" class="dialog-footer sure">
          <el-button type="primary" class="addFoldersures" :loading="addFileLoad" @click="addFile">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 请输入文件密码 -->
      <el-dialog title="请输入文件密码"
        width="30%"
        :close-on-click-modal="false"
      :visible.sync="passwordVisible">
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="passwords" :type="passwordType ? 'password':'text'" placeholder="请输入密码">
            <i slot="suffix" class="el-icon-view" @click="lookPassword"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleDownload">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 请输入文件夹密码 -->
      <el-dialog title="请输入文件夹密码"
        width="30%"
        :close-on-click-modal="false"
        :visible.sync="filePasswordVisible">
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="filePasswords" :type="passwordType ? 'password':'text'"  placeholder="请输入文件夹密码">
              <i slot="suffix" class="el-icon-view" @click="lookPassword"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleFolder">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 重命名弹出框 -->
      <el-dialog title="重命名" :close-on-click-modal="false" :visible.sync="renameVisible" width="30%">
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="fileName" placeholder="请输入文件夹名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleRename">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 设置密码 -->
      <el-dialog title="设置密码" 
        width="566px"
        :close-on-click-modal="false"
        :visible.sync="setPasswordVisible">
        <el-form :model="form">
          <el-form-item>
            输入密码：<el-input class="imput" :type="passwordType ? 'password':'text'" v-model="setPasswords" placeholder="请输入密码">
            <i slot="suffix" class="el-icon-view" @click="lookPassword"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            确认密码：<el-input class="imput" :type="passwordType1 ? 'password':'text'" v-model="setRePassword" placeholder="请确认密码">
            <i slot="suffix" class="el-icon-view" @click="lookPassword1"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSetpassword">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改密码 -->
      <el-dialog title="修改密码" 
        width="566px"
        :close-on-click-modal="false"
        :visible.sync="changePasswordVisible">
        <el-form :model="form">
          <el-form-item>
            <span class="visibility">旧</span>旧密码：
            <el-input class="imput" :type="passwordType1 ? 'password':'text'" v-model="oldPasswords" placeholder="请输入密码">
              <i slot="suffix" class="el-icon-view" @click="lookPassword1"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            输入密码：<el-input class="imput" :type="passwordType ? 'password':'text'" v-model="setPasswords" placeholder="请输入密码">
              <i slot="suffix" class="el-icon-view" @click="lookPassword"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            确认密码：<el-input class="imput" :type="passwordType ? 'password':'text'" v-model="setRePassword" placeholder="请确认密码">
              <i slot="suffix" class="el-icon-view" @click="lookPassword"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleChangepassword">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 取消密码 -->
      <el-dialog title="取消密码" 
        width="566px"
        :close-on-click-modal="false"
        :visible.sync="canclePasswordVisible">
        <el-form :model="form">
          <el-form-item>
            <el-input :type="passwordType ? 'password':'text'" 
              v-model="oldPasswords" placeholder="请输入旧密码">
              <i slot="suffix" class="el-icon-view" @click="lookPassword"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleCanclepassword">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 移动文件或文件夹 -->
      <el-dialog title="请选择移动目录" width="40%" class="move_folder" :close-on-click-modal="false" :visible.sync="moveFilevisible">
        <div class="move_content">
          <!-- 按钮 -->
          <div class="button_box_move">
            <!-- 返回 -->
            <div class="button_box_move_left">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><span class="all-file1" @click="getAllMoveFolders">全部</span></el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item,index) in moveBreadcrumb" :key="index">
                  <span class="all-file1" @click="getMoveBread(item)">{{item.F_Name}}</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 按钮 -->
            <div class="button_box_move_right">
              <el-input class="imputs1" v-model="folderName" @keyup.enter.native="getFolders" placeholder="请输入文件夹名称"></el-input>
              <el-button class="imputs2" @click="getFolders" type="primary" size="small" icon="el-icon-search">查询</el-button>
              <el-button class="imputs2" @click="foldersReset" size="small" icon="el-icon-refresh-right">重置</el-button>
            </div>
          </div>

          <!-- 文件夹列表 -->
          <div class="folder_list" v-if="moveFolderList.length > 0" v-loading="moveLoading">
            <div class="folder_list_items" v-for="(item,index) in moveFolderList" :key="index">
              <div class="folder_list_items_left">
                <img src="../../../assets/folder/folder.png">
              </div>
              <div class="folder_list_items_right">
                <a @click="getMoveNodeList(item)">{{item.F_Name}}</a>
              </div>
            </div>
          </div>
          <div class="textaligncenter" v-else>
              <img src="../../../assets/flowlist/no-data.png">
          </div>
          <!-- 按钮组 -->
          <div class="footer_btns">
            <el-button class="btns_folder" @click="moveFilevisible = false" size="small" >取消</el-button>
            <el-button class="btns_folder" @click="moveOnlyFile" size="small" type="primary" icon="el-icon-remove">移动</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 加密文件不支持在线预览 -->
      <el-dialog
        title="提示"
        :visible.sync="jiamiFileVisible"
        width="30%"
        :before-close="handleClose">
        <span>加密文件不支持在线预览</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="jiamiFileVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
      <!-- 请输入密码预览 -->
      <el-dialog title="请输入文件密码预览"
        width="30%"
        :close-on-click-modal="false"
        :visible.sync="previewVisible">
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="passwords1" :type="passwordType ? 'password':'text'"  placeholder="请输入文件密码">
            <i slot="suffix" class="el-icon-view" @click="lookPassword"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handlePreview">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// newFolder
import axios from 'axios'

import authorizeMixin from "@/mixins/authorize"; //鉴权混入
import request from '@/router/axios';
import { baseUrl,previewUrl } from "@/config/env";
import {
  newFolder,
  getAllFileList,
  batchDelete,
  getFileByParentId,
  updateFileName,
  setFolderPassword,
  changeFolderPassword,
  cancleFolderPassword,
  batchMove,
  moveFolderOrFile}from '@/api/user.js';
  export default {
    mixins: [authorizeMixin],
    data() {
      return {
        departmentData: [],
        fileIds:[],
        defaultProps: {
          children: 'children',
          label: 'F_FullName'
        },
        departmentItems:{},
        userInfo:this.$store.state.user.userInfo,
        breadcrumbData:[],
        moveBreadcrumb:[],
        F_ParentId:'',
        allFileData:[],//所有的文件
        passwordVisible:false,
        passwords:'',
        allchecked:false,
        addFolderVisible:false,
        fileName:'',
        isNeedSetPas:'0',
        folderPassword:'',
        folderRePassword:'',
        uploadFileVisible:false,
        fileIsNeedEncryption:'0',//文件是否需要加密
        fileIsNeedSetPas:'0',//是否需要设置密码
        filePassword:'',
        fileRePassword:'',
        length:0,
        fileList:[],//文件存储中间量
        folderDataList:[],
        fileDataList:[],
        fileName:'',//chongmign
        renameVisible:false,
        setPasswords:'',
        setRePassword:'',
        oldPasswords:'',
        setPasswordVisible:false,
        changePasswordVisible:false,
        filePasswordVisible:false,
        filePasswords:'',
        canclePasswordVisible:false,
        moveFilevisible:false,
        jiamiFileVisible:false,
        folderList:[],
        moveFolderList:[],
        allFileSelectData:[],
        filePath:'',
        previewVisible:false,
        addFolderFlag:false,
        addFileFlag:false,
        passwords1:'',
        loading:false,
        addFileLoad:false,
        aitems:{},
        passwordType:true,
        passwordType1:true,
        fileType:'',
        fileObj:{},
        result:[],
        isBreadcrumbFlag:false,
        folderId:"",//文件夹id
        keyword:'',
        moveFolderId:'',
        folderName:'',
        moveLoading:false,
        id:'',
        batchFlag:false,
        departmentId:''
      }
    },
    computed: {},
    watch: {
      allFileData:{
        deep:true,
        handler(v){
          let count = 0;
          if(v.length > 0){
            v.forEach(e => {
              if(e.isChecked){
                count++
              }
            })
          }
          if(count > 0){
            this.allchecked = true
          }else{
            this.allchecked = false
          }
        }
      },
    },
    async mounted() {
      await this.getUserInfo()
      await this.init()
      await this.getFolderList()//获取文件夹
      
    },
    methods: {
      getUserInfo(){
        if(this.userInfo && this.userInfo.F_Department && this.userInfo.F_Department.length > 0){
          this.departmentData = this.userInfo.F_Department
          this.departmentItems  = this.userInfo.F_Department[0]
        }
      },
      handleNodeClick(data){
        this.breadcrumbData = []
        this.folderId = ''
        this.departmentId = data.F_DepartmentId
        this.getFolderList()
      },
      init(){
        this.departmentId = this.departmentItems.F_DepartmentId
      },
      handleCommand(item,e) {
        // 重命名\移动\设置密码\删除\修改密码\取消密码\下载
        if(e.$el.innerText=='重命名'){
          this.reNameFolder(item)
        }else if(e.$el.innerText == '移动'){
          this.moveFile(item)
        }else if(e.$el.innerText == '设置密码'){
          this.setPasssword(item)
        }else if(e.$el.innerText == '删除'){
          this.deleteFolder(item)
        }else if(e.$el.innerText == '修改密码'){
          this.changePasssword(item)
        }else if(e.$el.innerText == '取消密码'){
          this.canclePasssword(item)
        }else if(e.$el.innerText == '下载'){
          this.downloadFolder(item)
        }
      },
      //重置
      reset(){
        this.keyword = ''
        this.getFolderList()
      },
      //全部
      getAll(){
        this.breadcrumbData = []
        this.folderId=""
        this.getFolderList()
      },
      getNodeList(item){
        if(item && item.F_Type=='文件夹'){
          // 先判断文件夹有没有密码
          if(item.F_IsPassword == 1){
            this.aitems = item
            this.filePasswords = ''
            this.filePasswordVisible = true
          }else{
            this.folderId = item.F_Id
            if(!this.breadcrumbData.includes(item))this.breadcrumbData.push(item)
            this.getFolderList()
          }
        }else{
          if(item.F_IsSecruity == 1){
            this.jiamiFileVisible = true
            return
          }
          if(item.F_IsPassword == 1){
            this.previewVisible = true
            this.passwords1 = ''
            this.filePath = item.F_FilePath
            this.itemPassword = item.F_Password
            this.filePath = previewUrl + encodeURIComponent(window.btoa(item.F_FilePath)); //(4.09以上版本)这里反斜杠必须有
          }else{
            this.filePath = item.F_FilePath
            this.filePath = previewUrl + encodeURIComponent(window.btoa(item.F_FilePath)); //(4.09以上版本)这里反斜杠必须有
            window.open(this.filePath )
          }
        }
      },
      getBread(item){
        if(item){
          //设置面包屑
          let arr
          let index = (this.breadcrumbData || []).findIndex(element => element.F_Id == item.F_Id)
          if(!(index == -1)){
            this.breadcrumbData = this.breadcrumbData.slice(0,index+1)
            this.folderId = item.F_Id
            this.getFolderList()
          }
        }
      },
      //获取所有文件
      getFolderList(){
        let params = {
          departmentId:this.departmentId,
          folderId:this.folderId,
          keyWord:this.keyword,
          level:1,
        }
        
        this.loading = true
        getAllFileList(params).then(res => {
          if(res.data.success){
            this.loading = false
            //处理数据
            if(res.data.data.folders && res.data.data.files){
              this.allFileData = [...res.data.data.folders,...res.data.data.files]
              // console.log(JSON.stringify(this.allFileData));
            }
          }
        })
      },
      handleFolder(){
        if(this.aitems.F_Password != this.filePasswords){
          this.$message.error("密码输入错误，请重新输入")
          return
        }
        this.folderId = this.aitems.F_Id
        if(!this.breadcrumbData.includes(this.aitems))this.breadcrumbData.push(this.aitems)
        this.getFolderList()
        this.filePasswordVisible = false
      },
      handlePreview(){
        console.log(this.itemPassword,this.passwords1)
        if(this.itemPassword == this.passwords1){
          window.open(this.filePath )
          this.previewVisible = false
        }else{
          this.$message.error("文件密码输入错误")
        }
      },
      //打开新建文件夹的窗口
      openNewFolder(){
        //重置
        this.fileName = ''//文件夹名称置为空
        this.isNeedSetPas = '0'//是否需要密码设置不不需要
        this.folderPassword = ''//文件夹密码置为空
        this.folderRePassword = ''//文件夹确认密码置为空
        this.addFolderVisible = true
      },
      //新建文件夹
      addFolfer(){
        //判断文件名称不能为空
        if(!this.fileName){
            this.$message.error("文件夹名称不能为空！")
            return
        }
        //判断文件夹密码两次输入的是否一致
        if(this.addFolderFlag){
          this.$message.error("文件夹密码错误，请重新输入")
          return
        }
        //判断当前面包屑的长度是否大于1
        if(this.breadcrumbData && this.breadcrumbData.length > 0){
          this.F_ParentId = this.breadcrumbData[this.breadcrumbData.length-1].F_Id
        }
        let params = {
          "F_FileName": this.fileName,//文件夹名称
          "F_ParentId":this.F_ParentId,
          "departmentId":this.departmentId,
          "isPassword": this.isNeedSetPas,//是否需要设置密码（0需要 1不需要）
          "password": this.folderPassword,//密码
          "permissionLevel": 1////0个人1部门2公司
        }
        newFolder(params).then(res => {
          if(res.data.success){
            this.$message.success("新增成功")
            this.addFolderVisible = false
            this.getFolderList()
          }
        })
      },
      //上传文件
      openUploadFile(){
        //重置
        this.fileIsNeedEncryption = '0'//文件是否加密
        this.fileIsNeedSetPas = '0'//是否需要设置密码：
        this.filePassword = ''//输入密码：
        this.fileRePassword = ''//确认密码
        this.fileList = []
        this.$nextTick(()=>{
          if(this.$refs.fileupload){
            this.$refs.fileupload.clearFiles()
          }
        })
        this.uploadFileVisible = true
      },
      addFile(){
        if(this.addFileFlag){
          this.$message.error("两次输入的文件夹密码不一致，请重新输入")
          return
        }
        // http://192.168.10.143:2828/file-manager/uploadFile?permissionLevel=2
        //上传文件的参数
        // departmentId
        // fileId
        // folderId
        // isPassword //是否需要设置密码
        // isSecurity //文件是否需要加密
        // parentId
        // password //文件密码
        // permissionLevel 2
        // 个人文件
        //如果父级id为空：并且只只上传一个文件
        this.uploadFileAxios()
      },
      uploadFileAxios(){
        this.addFileLoad = true
        if(this.fileList && this.fileList.length > 0){
          if(this.breadcrumbData && this.breadcrumbData.length > 0){
            this.folderId = this.breadcrumbData[this.breadcrumbData.length-1].F_Id
            this.isBreadcrumbFlag = true
          }else{
            this.folderId=''
            this.isBreadcrumbFlag = false
          }
          this.fileList.forEach((e,index) => {
            var form = new FormData();//new一个表单对象
            form.append("file", this.fileList[index]);
            axios({
              method: 'post',
              url:`${baseUrl}/file-manager/uploadFile?isPassword=${this.fileIsNeedSetPas}&isSecurity=${this.fileIsNeedEncryption}&permissionLevel=1&password=${this.filePassword}&folderId=${this.folderId}&departmentId=${this.departmentId}`,
              headers: {'Content-Type': 'multipart/form-data'},
              data:form
            }).then(res => {
              if(res.data.success){}
            })
          })
          setTimeout(()=>{
            this.addFileLoad = false
            this.uploadFileVisible = false
            this.$message.success("操作成功")
            if(this.isBreadcrumbFlag){
              this.getNodeList(this.breadcrumbData[this.breadcrumbData.length-1])
            }else{
              this.folderId = ''
              this.getFolderList()
            }
          },500)
        }
      },
      fileChange(){
        //判断上传文件数量
        this.length = document.querySelector("input[type=file]").files.length;
        if(this.length>0){
          Array.from(document.querySelector("input[type=file]").files).forEach(file=>{
            if(this.fileList.indexOf(file) == -1){
              this.fileList.push(file);
            }
          })
        }
        return false;
      },
      uploadFile1(){},
      setPasssword(item){
        this.fileId = item.F_Id
        this.setPasswordVisible = true
        this.passwordType1 = true
        this.setPasswords = this.setRePassword = ''
        if(item.F_Type == '文件夹'){
          this.type = 1
        }else{
          this.type = 0
        }
        this.allFileDataCopy()
      },
      changePasssword(item){
        this.fileId = item.F_Id
        this.changePasswordVisible = true
        this.oldPasswords = this.setPasswords = this.setRePassword = ''
        item.operate = false
        if(item.F_Type == '文件夹'){
          this.type = 1
        }else{
          this.type = 0
        }
        this.allFileDataCopy()
      },
      canclePasssword(item){
        this.fileId = item.F_Id
        this.canclePasswordVisible = true
        this.oldPasswords = ''
        this.passwordType = true
        item.operate = false
        if(item.F_Type == '文件夹'){
          this.type = 1
        }else{
          this.type = 0
        }
        this.allFileDataCopy()
      },
      handleSetpassword(){
        //非空判断
        if(this.setPasswords ==  "" || this.setPasswords == null || this.setPasswords == undefined){
          this.$message.error("请输入密码")
          return
        }
        if(this.setRePassword ==  "" || this.setRePassword == null || this.setRePassword == undefined){
          this.$message.error("请确认密码")
          return
        }
        //判断两次输入的密码是否一致
        if(this.setPasswords != this.setRePassword){
          this.$message.error("两次输入的密码不一致")
          return
        }
        setFolderPassword(this.fileId,this.setPasswords,this.type).then(res => {
          if(res.data.success){
            this.$message.success("操作成功")
            this.setPasswordVisible = false
            this.getFolderList()
          }
        })
      },
      handleChangepassword(){
        //非空判断
        if(this.oldPasswords ==  "" || this.oldPasswords == null || this.oldPasswords == undefined){
          this.$message.error("请输入旧密码")
          return
        }
        if(this.setPasswords ==  "" || this.setPasswords == null || this.setPasswords == undefined){
          this.$message.error("请输入密码")
          return
        }
        if(this.setRePassword ==  "" || this.setRePassword == null || this.setRePassword == undefined){
          this.$message.error("请确认密码")
          return
        }
        //判断两次输入的密码是否一致
        if(this.setPasswords != this.setRePassword){
          this.$message.error("两次输入的密码不一致")
          return
        }
        changeFolderPassword(this.fileId,this.oldPasswords,this.setPasswords,this.type).then(res => {
          if(res.data.success){
            this.$message.success("操作成功")
            this.changePasswordVisible = false
            this.getFolderList()
          }
        })
      },
      handleCanclepassword(){
        //非空判断
        if(this.oldPasswords ==  "" || this.oldPasswords == null || this.oldPasswords == undefined){
          this.$message.error("请输入旧密码")
          return
        }
        cancleFolderPassword(this.fileId,this.oldPasswords,this.type).then(res => {
          if(res.data.success){
            this.$message.success("操作成功")
            this.canclePasswordVisible = false
            this.getFolderList()
          }
        })
      },
      //确认文件夹密码是否一致
      // reFirmPass(){
      //   if(this.folderPassword && !(this.folderPassword == this.folderRePassword)){
      //     this.$message.warning("两次输入密码不一致，请重新输入")
      //     this.addFolderFlag = true
      //   }else{
      //     this.addFolderFlag = false
      //   }
      // },
      reFirmPassword(){
        if(this.filePassword && !(this.filePassword == this.fileRePassword)){
          this.$message.warning("两次输入密码不一致，请重新输入")
          this.addFileFlag = true
        }else{
          this.addFileFlag = false
        }
      },
      allFileDataCopy(){
        this.allFileData = [...this.allFileData]
      },
      selectAll(){
        if(this.allchecked){
          this.allSelectFile(1)//全选
        }else{
          this.allSelectFile(2)//全不选
        }
      },
      allSelectFile(v){
        if(v == 1){//全选
          if(this.allFileData.length > 0){
            this.allFileData.forEach(e => {
              e.isChecked = true
            })
          }
        }else if(v == 2){//全不选
          if(this.allFileData.length > 0){
            this.allFileData.forEach(e => {
              e.isChecked = false
            })
          }
        }
        this.allFileDataCopy()
      },
      checkItem(){
        this.allFileDataCopy()
      },
      //删除文件及文件夹
      batchDelete(){
        this.fileIds = []
        if(this.allFileData && this.allFileData.length > 0){
          this.allFileData.forEach(e => {
            if(e.isChecked){
              this.fileIds.push(e.F_Id)
            }
          })
          batchDelete(this.fileIds).then(res =>{
            if(res.data.success){
              this.$message.success("操作成功")
              this.getFolderList()
            }
          })
        }
      },

      deleteFolder(item){
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let fileIds = [item.F_Id]
          batchDelete(fileIds).then(res => {
            if(res.data.success){
              this.$message.success("操作成功")
              this.getFolderList()
            }
          })
        }).catch(() => {})
      },
      reNameFolder(item){
        this.renameVisible = true
        this.fileId = item.F_Id
        if(item.F_Type == '文件夹'){
          this.type = 1
          this.fileName = item.F_Name
        }else{
          this.type = 0
          this.fileName = item.F_Name.split('.')[0]
          this.fileType = item.F_Name.split('.')[1]
        }
        this.allFileDataCopy()
      },
      handleRename(){
        if(this.type == 0){//文件
          this.fileName = this.fileName+'.'+this.fileType
        }else if(this.type == 1){//文件夹
          this.fileName = this.fileName
        }
        updateFileName(this.fileId,this.fileName,this.type).then(res => {
          if(res.data.success){
            this.$message.success("操作成功")
            this.getFolderList()
            this.renameVisible = false
          }
        })
      },
      downloading(item){
        request({
          url: `${baseUrl}/file-manager/downloadFile?fileId=${item.F_Id}`,
          method: 'get',
          responseType: 'blob'
        }).then(res => {
          if (res.data.type === 'application/json'){
            let text =  res.data.text();
            text.then(result =>{
              const resultObj = JSON.parse(result);
              if(!resultObj.success){
                this.$notify({
                  title: "失败",
                  message: resultObj.msg,
                  type: 'error',
                });
              }
            })
          }else{
            const ct = res.data
            let url = window.URL.createObjectURL(new Blob([ct], {
              type: "application/octet-stream;charset=utf-8",
            }));
            let excelName = item.F_Name
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', excelName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        })
      },
      // 下载文件
      downloadFolder(item){
        //下载文件时先判断文件是否有密码
        if(item.F_IsPassword == 0){//没有密码直接下载
          // 调用下载文件的接口
          this.downloading(item)
        }else if(item.F_IsPassword == 1){//有密码，先输入密码
          this.fileObj = item
          this.passwordVisible = true
        }
      },
      //确认下载
      handleDownload(){
        if(this.fileObj.F_Password != this.passwords){
          this.$message.error("密码输入不正确，请重新输入")
          return
        }
        this.downloading(this.fileObj)
        this.passwordVisible = false
      },
      handleMore(item){
        item.operate = !item.operate
        this.allFileDataCopy()
      },
      // 移动文件
      moveFile(item){
        this.batchFlag = false
        this.id = item.F_Id
        this.moveBreadcrumb = []
        this.moveFolderId = ''
        //调用获取文件夹的接口
        this.getFolders()
        this.moveFilevisible = true
      },
      barchMoveRes(){
        this.fileIds = []
        this.batchFlag = true
        //判断选中的文件
        if(this.allFileData && this.allFileData.length > 0){
          this.allFileData.forEach(e=>{
            if(e.isChecked){
              this.fileIds.push(e.F_Id)
            }
          })
          this.batchFlag = true
          //判断选中的文件
          this.moveBreadcrumb = []
          this.moveFolderId = ''
          this.getFolders()
          this.moveFilevisible = true
        }
      },
      moveOnlyFile(){
        //单个移动文件
        if(!this.batchFlag){
          if(this.id){
            if(!this.parentFolderId){
              this.parentFolderId = '0'
            }
            moveFolderOrFile(this.id,this.parentFolderId).then(res => {
              if(res.data.success){
                this.$message.success("操作成功")
                this.moveFilevisible = false
                //调用查询文件夹列表的接口
                this.getFolderList()
              }
            })
          }
        }else{
          //批量移动文件
          if(!this.parentFolderId){
            this.parentFolderId = '0'
          }
          batchMove(this.parentFolderId,this.fileIds).then(res => {
            if(res.data.success){
              this.$message.success("操作成功")
              this.moveFilevisible = false
              //调用查询文件夹列表的接口
              this.getFolderList()
            }
          })
        }
        
      },
      foldersReset(){
        this.folderName = ''
        this.getFolders()
      },
      getAllMoveFolders(){
        this.moveFolderId = ''
        this.moveBreadcrumb = []
        this.getFolders()
      },
      getMoveBread(item){
        if(item){
          //设置面包屑
          let arr
          let index = (this.moveBreadcrumb || []).findIndex(element => element.F_Id == item.F_Id)
          if(!(index == -1)){
            this.moveBreadcrumb = this.moveBreadcrumb.slice(0,index+1)
            this.moveFolderId = item.F_Id
            this.getFolders()
          }
           console.log(this.moveBreadcrumb);
        }
      },
      getMoveNodeList(item){
        this.moveFolderId = item.F_Id
        this.parentFolderId = item.F_Id
        if(!this.moveBreadcrumb.includes(item))this.moveBreadcrumb.push(item)
        this.getFolders()
      },
      getFolders(){
        let params = {
          departmentId:this.departmentId,
          folderId:this.moveFolderId,
          keyWord:this.folderName,
          level:1,
        }
        this.moveLoading = true
        getAllFileList(params).then(res => {
          if(res.data.success){
            this.moveLoading = false
            //处理数据
            this.moveFolderList = res.data.data.folders
          }
        })
      },
      //批量移动文件
      lookPassword(){
        this.passwordType = !this.passwordType
      },
      lookPassword1(){
        this.passwordType1 = !this.passwordType1
      }
    }
}
</script>

<style scoped>
.flex_{
  display: flex;
  flex-direction: row;
}
.content_left{
  width:220px;
  background:#fff;
  border-right: 1px solid #f1f1f1;
}
.content_right{
  width:100%;
  height: 100%;
  background:#fff;
  overflow: scroll;
}
</style>

<style scoped>
.button_box{
  width: 100%;
  height: 40px;
  background: #fff;
}
.flex1{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.flex2{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.btns{
  width: 410px;
  height: 100%;
}
.input_box{
  width: 400px;
  height: 100%;
}
.btns_box{
  height: 100%;
}
.btns_box1{
  height: 28px;
  margin-left: 10px;
}
.btns_box2{
  height: 28px;
  margin-left: 10px;
  margin-right: 12px;
}
.margin-right{
  margin-right: 48px;
}
::v-deep .el_input_btn > .el-input__inner{
  width: 100%;
  height: 28px;
  margin-top:6px;
}
.el_button_btn{
  width: 77px;
  height: 28px;
}
.table_box{
  width: 100%;
  background: #fff;
  margin-top: 8px;
  overflow: scroll;
}
.breadcrumb{
  width: 100%;
  height: 53px;
  display: flex;
}
.breadcrumb_left{
  width: 50%;
  height: 53px;
  margin-left: 10px;
  font-size: 16px;
  line-height: 53px;
  color: #666;
  display: flex;
}
.breadcrumb_right{
  height: 53px;
  display: flex;
  height: 53px;
  margin-left: auto;
  align-items: center;
}
.table_header{
  width: 100%;
  height: 45px;
  background: #f1f1f1;
  display: flex;
  flex-direction: row;
  border-radius: 4px;
}
/* 选择框-15% */
.check_box{
  width: 5%;
  height: 100%;
  text-align: center;
}
.all_checked_box{
  margin-top: 10px;
}
/* 文件名称-35% */
.file_name{
  width: 35%;
  height: 100%;
  font-size: 16px;
  line-height: 45px;
   color: rgba(16, 16, 16, 100);
}
/* 创建者-15% */
.created_user{
  width: 15%;
  height: 100%;
  font-size: 16px;
  line-height: 45px;
  color: rgba(16, 16, 16, 100);
  text-align: center;
}
/* 创建时间-15% */
.created_time{
  width: 15%;
  height: 100%;
  font-size: 16px;
  line-height: 45px;
  color: rgba(16, 16, 16, 100);
  text-align: center;
}
/* 文件大小-15% */
.file_size{
  width: 15%;
  height: 100%;
  font-size: 16px;
  line-height: 45px;
   color: rgba(16, 16, 16, 100);
  text-align: center;
}
/* 操作-15% */
.file_more{
  width: 15%;
  height: 100%;
  font-size: 16px;
  line-height: 45px;
  color: rgba(16, 16, 16, 100);
}
.textaligncenter{
  text-align: center;
}
.textalignright{
  text-align: right;
}
.table_body_items{
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f1f1f1;
}
.table_body_items:hover{
  cursor: pointer;
  background: #f1f1f1;
}
::v-deep .el-dialog__footer {
  text-align: center;
  border-top: 1px solid #f1f1f1;
}
::v-deep .el-dialog__footer > .dialog-footer > button{
  width:200px;
  margin-top:3px;
}
.sure{
  position: relative;
  top: 4px;
}
.wrap{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  
}
.wrap1{
  width: 100%;
  height: 40px;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
}
.wraps{
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
}
.wrap_left{
  width: 30%;
  height: 32px;
  margin-top: 4px;
  text-align: right;
  color: #101010;
  font-size: 16px;
}
.wrap_left1{
  width: 30%;
  height: 32px;
  margin-top: 4px;
  text-align: right;
   color: #101010;
  font-size: 16px;
}
.wrap_right1{
  width: 70%;
  margin-top: 4px;
}
.wrap_right{
  width: 70%;
  height: 32px;
   margin-top: 4px;
}
::v-deep .wrap_right_input > .el-input__inner{
  height: 32px;
}
.file_name_pic{
  width:42px;
  height: 42px;
}
.file_name_text{
  height: 42px;
  line-height: 42px;
  margin-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file_name_text:hover{
  cursor: pointer;
  color: #0063f5;
}
.file_name_pic > img{
  width: 42px;
  height: 40px;
  border-radius: 4px;
}
.flexsss{
  display: flex;
  flex-direction: row;
}
.lock{
  width: 16px!important;
  height: 16px!important;
  position: relative!important;
  top: -45px!important;
  left: 20px!important;
}
.cursor:hover{
  cursor: pointer;
  color: #0063f5;
}
.cursor1{
  cursor: not-allowed;
}
.table_body{
  /* height: 620px; */
  background: #fff;
  text-align: center;
  border-radius: 4px;
 
}
.table_body::after{
  content: "";
  display: inline-block;
  height: 100%;
  width: 1px;
  vertical-align: middle;
}
.table_body > img{
  vertical-align: middle;
}
.getMore{
  font-size: 22px;
}
.getMore:hover{
  font-size: 22px;
  cursor: pointer;
  color: #0063f5;
}
.getmore_items{
  width: 100px;
  height: 175px;
  background: #f1f1f1;
  position: relative;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
   position: relative;
}
.getmore_items > ul{
  display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.getmore_items > ul > li{
  list-style: none;
  text-align: center;
  margin-left: -40px;
  line-height: 2em;
}
.getmore_items > ul > li > a:hover{
  cursor: pointer;
}
.red{
  color:#fc3a15
}
.imput{
  width:85%;
}
.visibility{
  visibility: hidden;
}
.move_content{
  margin-left:24px;
  margin-right:24px;
}
::v-deep .move_folder > .el-dialog > .el-dialog__body{
  padding:0!important;
}
.button_box_move{
  height:40px;
  border-bottom:1px solid #f1f1f1;
  display: flex;
  flex-direction: row;
}
.button_box_move_left{
  width:50%;
  height:40px;
}
.button_box_move_right{
  width:50%;
  height:40px;
}
.imputs1{
  width: 200px;
}
.imputs2{
  margin-left:8px;
}
::v-deep .imputs1 > .el-input__inner{
  height:32px!important;
  line-height:32px;
  margin-top:4px;
}
.color-red{
    color: #ee9191;
    font-size: 16px;
    letter-spacing: 0.2em;
    position: relative;
    top: 3px
}
.folder_list{
  height:300px;
  overflow: scroll;
}
.folder_list_items{
  height: 42px;
  display: flex;
  flex-direction: row;
  margin:8px 0;
}
.folder_list_items_left{
  width:42px;
  height:42px;
}
.folder_list_items_left > img{
  width:100%;
  height:100%;
}
.folder_list_items_right{
  height:42px;
  margin-left:8px;
}
.folder_list_items_right > a{
  line-height: 42px;
}
.folder_list_items_right > a:hover{
  cursor:pointer;
  color:#0063f5;
}
.footer_btns{
  height:60px;
  text-align: right;
}
.btns_folder{
  margin-top:14px;
}
.marginleft10{
  margin-left: 10px;
  margin-right: 20px;
}
.width104x28{
  width: 104px;
  height: 28px;
  border-radius: 4px;
  background-color: rgba(55, 148, 255, 100);
}
.width77x28{
  width: 77px;
  height: 28px;
  border-radius: 4px;
  background-color: rgba(55, 148, 255, 100);
}
.addFoldersures{
  width: 218px;
  height: 42px;
  margin: 12px 0;
  font-size: 18px;
}
.margintop6{
  margin-top: 6px;
}
.w-el-link{
  margin-left: 12px;
}
.el-icon-view{
  font-size: 18px;
}
::v-deep .el-breadcrumb{
  font-size: 16px !important;
  line-height: 3 !important;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
/* wgs-braad el-breadcrumb__item el-breadcrumb__inner */
/* ::v-deep .el-breadcrumb span{
  flex: 1 0 auto;
} */
.all-file:hover{
  cursor: pointer;
  color: #0063f5;
}
.all-file1{
  font-size: 14px;
}
.all-file1:hover{
  cursor: pointer;
  color: #0063f5;
}
.border1{
  border-bottom:1px solid rgb(221, 221, 223);
}
 .el-dropdown-link {
    cursor: pointer;
    color: #333;
    font-size: 18px;
    letter-spacing: 0.2em;
    font-weight: bold;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .marginauto{
    margin: 0 auto;
  }
  ::v-deep .el-dropdown-menu__item{
    font-size: 16px !important;
    line-height: 34px !important;
  }
</style>

